<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>label</title>
	<style type="text/css">
	
	ul {
		list-style: none;
		margin: 10px 0;
		border: 1px dotted #aaa;
	}

	li{
		widows: 300px;
		padding: 5px 0;
	}

    </style>
</head>
<body>
	<div class="container">
		<h1>label</h1>
		<div id="box">
			
		</div>
	</div>
<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
<script type="text/javascript">

let lessons = [
	{title: '媒体查询响应式布局'},{title: 'FLEX 弹性盒模型'},{title: 'GRID 栅格系统'}
];

var str1 = `<ul class="ul">
	${lessons.map(item => {
		return '<li>'+ item.title +'</li>';
	}).join('')}
</ul>`;
box.innerHTML = str1;
console.log(str1)

// 模板字面量支持嵌套使用
var str2 = `<ul class="ul">
	${lessons.map(item => {
		return `<li>${item.title}</li>`	
	}).join('')}
</ul>`
$(box).append(str2)
console.log(str2)
</script>
</body>
</html>